<template>
  <div>
    <!-- 1、让谁有动画就用Transition进行包裹
         2、 每个元素不一样的动画就设置name(不设置识别默认v-开头)
         3、TransitionGroup是用在v-for列表-->
    <Transition>
      <div class="box1" v-show="isShow1"></div>
    </Transition>

    <button @click="isShow1 = !isShow1">显示/隐藏</button>
    <hr />

    <Transition name="silde">
      <div class="box2" v-show="isShow2"></div>
    </Transition>

    <button @click="isShow2 = !isShow2">显示/隐藏</button>
    <hr />

    <Transition
      enter-active-class="animate__animated animate__zoomInRight"
      leave-active-class="animate__animated animate__zoomOutLeft"
    >
      <div class="box3" v-show="isShow3"></div>
    </Transition>

    <button @click="isShow3 = !isShow3">显示/隐藏</button>
    <hr />

    <ul>
      <TransitionGroup name="ul">
        <li v-for="(item, index) in Kings" :key="item">
          <span>{{ item }}</span>
          <span @click="delKing(index)">X</span>
        </li>
      </TransitionGroup>
      <button @click="addKing">添加王中王</button>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
const isShow1 = ref(true);
const isShow2 = ref(true);
const isShow3 = ref(true);
const Kings = ref(["郭富城", "黎明", "刘德华", "张学友"]);

const addKing = () => {
  Kings.value.unshift(Date.now() + "周星驰");
};
const delKing = (index) => {
  Kings.value.splice(index, 1);
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box1 {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  border-radius: 10px;
}
.box2 {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 10px;
}
.box3 {
  width: 200px;
  height: 200px;
  background-color: rgb(0, 255, 247);
  border-radius: 10px;
}
ul {
  font-size: 20px;
  width: 400px;
  border: 2px solid skyblue;
  button {
    display: block;
    margin: 0 auto;
  }
  li {
    margin: 5px;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span:last-child {
      color: red;
      cursor: pointer;
    }
  }
}
// box1动画
.v-enter-active,
.v-leave-active {
  transition: all 0.6s ease;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
.v-leave-from,
.v-enter-to {
  opacity: 1;
  transform: translateX(0%);
}
// box2动画
.silde-enter-active,
.silde-leave-active {
  transition: all 0.6s ease;
}
.silde-enter-from {
  transform: translateX(-100%);
}
.silde-leave-to {
  transform: translateX(500%);
}
.silde-leave-from,
.silde-enter-to {
  transform: translateX(0);
}
// ul动画
.ul-enter-active,
.ul-leave-active {
  transition: all 0.6s ease;
}
.ul-enter-from {
  transform: translateY(-100%) scale(0.5);
}
.ul-enter-to {
  transform: scale(1.3);
}
.ul-leave-from,
.ul-leave-to {
  transform: translateX(-150%);
}
</style>